<template>
  <div class="my-progress" v-loading="loading">
    <div class="my-progress__echarts">
      <div id="main1"></div>
      <div class="my-progress__echarts__text">
        <h3>{{ detail.progress.intoRate }}%</h3>
        <p>已完成</p>
      </div>
    </div>
    <div class="my-progress__text">
      <ul>
        <li><i></i><span>总户数</span>{{ detail.progress.totalNum }}</li>
        <li><i></i><span>上门总户数</span>{{ detail.progress.totalIntoNum }}</li>
        <li><i></i><span>摸排注册人数</span>{{ detail.progress.userNum }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, onBeforeUnmount } from 'vue'
import { progressMapApi } from '@/views/workbench/api/workbenchApi'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/global/session'
import * as echarts from 'echarts'
const route = useRoute()
const townId = route.query.townId as string
let userInfo = reactive({ roleId: '', townId: '', countryId: '', roleAuth: '' })
userInfo = JSON.parse(getUserInfo() as string)

const loading = ref<boolean>(false)
interface PropsDialog {
  resize: boolean;//浏览器是否变化
}
const props = withDefaults(defineProps<PropsDialog>(), {
  resize: false,
});
//获取入户进度
interface DetailProgress {
  progress: {
    intoRate?: string | number;
    totalNum?: string | number;
    totalIntoNum?: string | number;
    userNum?: string | number;
  }
}
const detail = reactive<DetailProgress>({
  progress: {}
})
const onList = async () => {
  try {
    let res = await progressMapApi({ id: townId })
    if (res?.code === 0) {
      detail.progress = res.data
      let gaugeData = [
        {
          value: res.data.intoRate,//res.data.intoRate
        }
      ];
      echartsFun(gaugeData)
    } else {
      loading.value = false
    }
  } catch {
    loading.value = false
  }
}
//如果是乡镇账号 判断一下 是不是当前乡镇
if (userInfo.roleId == '4' || userInfo.roleId == '5') {
  if (userInfo.townId === townId) {
    loading.value = true
    onList()
  }
} else {
  loading.value = true
  onList()
}
// 入户进度图 绘制图表
const echartsFun = (val) => {
  let myChart = echarts.init(document.getElementById('main1') as unknown as HTMLDivElement)
  let optionMap = {
    series: [
      {
        type: 'gauge',
        radius: '80%',
        startAngle: 90,//开始点的位置
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 3,
            borderColor: '#fff',
            color: {
              colorStops: [{
                offset: 0, color: '#00ffe1' // 0% 处的颜色
              }, {
                offset: 1, color: '#00ff66' // 100% 处的颜色
              }],
            },
          }
        },
        axisLine: {
          lineStyle: {
            width: 16//环形的宽度
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: val,
        detail: {
          show: false,
        }
      }
    ]
  };
  myChart.setOption(optionMap);
  loading.value = false
}

//浏览器是否变化
watch(
  () => props.resize,
  () => {
    let myChart = echarts.init(document.getElementById('main1') as unknown as HTMLDivElement)
    myChart.resize()
  }
)
//注销之前
onBeforeUnmount(() => {
  let myChart = echarts.init(document.getElementById('main1') as unknown as HTMLDivElement)
  myChart.dispose()
})
</script>
<style scoped lang='scss'>
.my-progress {
  display: flex;
  align-items: center;
  justify-content: center;

  &__echarts {
    width: calc(50vh - 120px);
    height: calc(50vh - 120px);
    position: relative;

    >div {
      width: 100%;
      height: 100%;
    }

    &__text {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;

      >h3 {
        font-size: 5.4vh;
        font-weight: bold;
        color: $my-color-primary;
        margin-top: 5px;
      }

      >p {
        color: #999;
        font-size: 2vh;
        margin-top: 5px;
      }
    }
  }

  &__text {
    width: 200px;
    margin-left: 3vw;

    >ul {
      >li {
        display: flex;
        font-size: 14px;
        line-height: 20px;
        margin: 15px 0;

        >i {
          display: block;
          width: 4px;
          height: 12px;
          background: $my-color-primary;
          border-radius: 2px;
          margin: 4px 6px 0 0;
        }

        >span {
          display: block;
          width: 100px;
          color: #999;
        }
      }
    }
  }
}
</style>